<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>MyOpera</title>
    <style>
        #bk{
            border-radius: 20px;
            border: solid 2px darkkhaki;
            width: 780px;
            height: 530px;
            text-align: center;
            margin:0 auto;
        }
    </style>
</head>
<body>
<nav style="position: fixed;right: 0px;left: 0px;top: 0px;z-index: 1030;">
    <div style="float: left;margin: 10px 0 10px 300px">
        <a href="#">  <h1 style="font-size: 33px">MyHome</a></h1></div>
    <div style="float: left;margin: 10px 0 10px 90px"><a href="#"><h1>AboutMe</h1></a></div>
    <div style="float: left;margin: 10px 0 10px 90px"><a href="#"><h1>MyOpera</h1></a></div>
</nav>
<div id="bk" style="margin-top:150px">
    <img src="./mp/01.png" style="width: 580px;height: 530px;border-radius: 20px" alt=""/>
    <h2>XXXXfff</h2>
</div>
<div id="bk" style="margin-top:100px">
    <img src="./mp/02.png" style="width: 780px;height: 530px;border-radius: 20px" alt=""/>
    <h2>XXXX</h2>
</div>
<div id="bk" style="margin-top:100px">
    <img src="./mp/03.png" style="width: 780px;height: 530px;border-radius: 20px" alt=""/>
    <h2>XXXX</h2>
</div>
<div id="bk" style="margin-top:100px">
    <img src="./mp/04.png" style="width: 580px;height: 530px;border-radius: 20px" alt=""/>
    <h2>XXXX</h2>
</div>
<div style="margin-top:100px;text-align: center;">
    <img src="./mp/05.png" style="width: 850px;height: 389px;border-radius: 20px" alt=""/>
    <h2>XXXX</h2>
</div>
</body>
</html>